import React from 'react';
import { StyleSheet, View, Text, Image, FlatList, ImageBackground, TouchableOpacity } from 'react-native';
import { useCollect } from '../context';
import { FontAwesome5 } from '@expo/vector-icons';
import Swiper from 'react-native-swiper';

const Introduce = () => {
  const { isCollect, setIsCollect } = useCollect();
  return (
    <View style={styles.introduceBox}>
      <View style={{ height: 0.25 * h }}>
        <Swiper
          loop={true}
          autoplay={true}
          showsPagination={true}
          autoplayTimeout={2}
          dot={<View style={{
            backgroundColor: '#fff',
            width: 10,
            height: 5,
            borderRadius: 4,
            marginLeft: 5,
            marginRight: 5,
          }} />}
          activeDot={<View style={{
            backgroundColor: '#ffdb2c',
            width: 20,
            height: 5,
            borderRadius: 4,
            marginLeft: 5,
            marginRight: 5,
          }} />}
          paginationStyle={{ bottom: 0.025 * h }}
        >
          <View>
            <Image style={styles.img}
              source={require('../assets/FinalWork/banner.png')} />
          </View>
          <View>
            <Image style={styles.img}
              source={require('../assets/FinalWork/banner.png')} />
          </View>
          <View>
            <Image style={styles.img}
              source={require('../assets/FinalWork/banner.png')} />
          </View>
        </Swiper>
      </View >
      <View style={styles.introduce}>
        <View style={styles.introTitle}>
          <Image source={require('../assets/FinalWork/title.png')} />
        </View>
        <View style={styles.introList}>
          <FlatList
            contentContainerStyle={styles.list}
            numColumns={2}
            data={[
              { key: 0, name: '北欧原木色置物架', bg: require('../assets/FinalWork/img.png'), },
              { key: 1, name: '简约黑檀木茶几', bg: require('../assets/FinalWork/img2.png'), },
              { key: 2, name: '北欧白橡木书架', bg: require('../assets/FinalWork/img3.png'), },
              { key: 3, name: '北欧风餐边柜', bg: require('../assets/FinalWork/img4.png'), },
              { key: 4, name: '简约木茶几', bg: require('../assets/FinalWork/img5.png'), },
              { key: 5, name: '北欧橡木书柜', bg: require('../assets/FinalWork/img6.png'), },
            ]}
            renderItem={({ item }) => <View style={styles.introLi}>
              <ImageBackground style={styles.introImg} source={item.bg}>
                <View style={styles.introSpan}>
                  <Text style={styles.text}>{item.name}</Text>
                </View>
                <TouchableOpacity style={styles.star}
                  onPress={() => {
                    let index = item.key;
                    let list = isCollect;
                    let flag = isCollect[index];
                    console.log(list);
                    console.log(flag);
                    if (isCollect[index] == true) {
                      isCollect[index] = false;
                      setIsCollect(
                        [...list]
                      );
                      AsyncStorage.setItem('install', JSON.stringify(list))

                    } else {
                      isCollect[index] = true;
                      setIsCollect(
                        [...list]
                      );
                      AsyncStorage.setItem('install', JSON.stringify(list))
                    }
                  }} >
                  {
                    isCollect[item.key] === true ?
                      <FontAwesome5 name="star-half-alt" size={24} color="red" />
                      :
                      <FontAwesome5 name="star-half-alt" size={24} color="#aaa" />
                  }
                </TouchableOpacity>
              </ImageBackground>
            </View>}
          />
        </View>
      </View>
    </View>

  )
}

const styles = StyleSheet.create({
  img: {
    width: '100%',
    height: '100%'
  },
  introduceBox: {
    flex: 1
  },
  introduce: {
    flex: 1
  },
  introTitle: {
    marginTop: 0.03 * h,
    alignItems: 'center'
  },
  introList: {
    flex: 1
  },
  list: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  introLi: {
    width: 0.46 * w,
    justifyContent: 'space-between',
    height: 0.16 * h,
    marginTop: 0.02 * h,
    marginRight: 0.02 * w,
    marginLeft: 0.02 * w,
  },
  introImg: {
    width: 0.46 * w,
    height: 0.16 * h
  },
  introSpan: {
    width: 0.46 * w,
    height: 0.05 * h,
    backgroundColor: 'rgba(0,0,0,0.4)',
    position: 'absolute',
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
  star: {
    width: 0.08 * w,
    height: 0.08 * w,
    borderRadius: 0.04 * w,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0.04 * h,
    right: 0.01 * w,
  },
  common: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})
export default Introduce;